<template>
  <div class="newsinfo">
    <!-- newsinfo ---{{ id }} -->
    <!-- header -->
    <header>
      <h1 class="title">{{ newsinfo.title }}</h1>
      <div class="des">
        <span class="add-time">{{ newsinfo.add_time }} </span>
        <span class="click"> 点击{{ newsinfo.click }}次 </span>
      </div>
    </header>
    <!-- body -->
    <div class="content">
      {{ newsinfo.content }}
    </div>
    <!-- 评论区域 -->
    <Comment :id="id"></Comment>
  </div>
</template>
<script>
// 是一个绝对路径 相当于src
import Comment from '@/components/Comment'
export default {
  data: () => ({
    id: '',
    newsinfo: {}
  }),
  created() {
    this.id = this.$route.params.id
    this.getNewsInfoById()
  },
  methods: {
    async getNewsInfoById() {
      try {
        const {
          data: { message }
        } = await this.Api.getNewsInfoById(this.id)
        this.newsinfo = message
        console.log(message)
      } catch (error) {
        this.$Toast('请求新闻详情失败')
      }
    }
  },
  components: {
    Comment
  }
}
</script>
<style lang="less" scoped>
.newsinfo {
  padding: 10px;
  header {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    .title {
      font-size: 16px;
      text-align: center;
    }
    .des {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      font-size: 12px;
      .add-time {
        color: #1989fa;
      }
    }
  }
}
</style>
